Skip to content

feat: Improve the blog sidebar by adding a highlighter to active section#1706

Closed
chauhan-varun wants to merge 1 commit intojson-schema-org:mainfrom
chauhan-varun:feat/highlight-sidebar
Closed

feat: Improve the blog sidebar by adding a highlighter to active section#1706
chauhan-varun wants to merge 1 commit intojson-schema-org:mainfrom
chauhan-varun:feat/highlight-sidebar

Conversation

@chauhan-varun
Copy link
Copy Markdown
Contributor

@chauhan-varun chauhan-varun commented Jun 14, 2025

What kind of change does this PR introduce?

Enhancement: I've implemented highlighting for the sidebar navigation in the blog section.

Issue Number:

Screencast.from.2025-06-14.23-02-49.webm
Screencast.from.2025-06-14.23-27-51.webm

If relevant, did you update the documentation?
NA

Summary
The implementation works by:

  • Observing all heading elements (h1, h2, h3, h4) on the page
  • When a heading enters the viewport (with appropriate margins to make it feel natural), it sets that heading's ID as the active section
  • The sidebar links check if their target section matches the active section ID and apply appropriate styling

Now when you scroll through a blog post, the sidebar will automatically highlight the section you're currently reading, making it easier to keep track of your position in the document. This works in both light and dark modes with appropriate color schemes for each.

Does this PR introduce a breaking change?
NA

Checklist

Please ensure the following tasks are completed before submitting this pull request.

@chauhan-varun chauhan-varun requested a review from a team as a code owner June 14, 2025 18:00
@github-actions
Copy link
Copy Markdown

Hi @chauhan-varun! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: completed checklist items

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

@Utkarsh-123github
Copy link
Copy Markdown
Member

Hi @chauhan-varun , Could you please take a look at the failing checks on your PR and fix them ?
Let me know if you need any help. Thanks a lot for your contribution!

@benjagm
Copy link
Copy Markdown
Collaborator

benjagm commented Jun 28, 2025

The issue was finally not accepted, so we won't proceed with this change. Thanks a lot for your contributions.

@benjagm benjagm closed this Jun 28, 2025
@github-project-automation github-project-automation bot moved this from Unclear to Done in PR - Triage Group Jun 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

✨ Enhancement: Improve the blog sidebar by adding a highlighter to active section

3 participants